<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            padding-left: 10px;
        }
    </style>
</head>
<body>
k_e_y: <input type="text" id="txtKey"><br>
value: <input type="text" id="txtValue"><br><br>
<input type="button" value="存数据" id="btnAdd">
<input type="button" value="取数据" id="btnGet">
<input type="button" value="删除数据" id="btnRemove">
<input type="button" value="清空数据" id="btnClear">
<input type="button" value="存对象" id="btnAddObj">
<input type="button" value="取对象" id="btnGetObj">

</body>
<script src="./js/local.js"></script>
<script>
    function makeDiv(plId, strPLContent) {
        let divObj = document.createElement('div')
        divObj.innerHTML = strPLContent
        divFather.appendChild(divObj)
        let spanObj = document.createElement('span')
        spanObj.innerHTML = 'X'
        spanObj.setAttribute('plid', plId)
        spanObj.onclick = remove;
        divObj.appendChild(spanObj)
    }
    function remove(e) {
        if(!confirm('您确定要删除吗？')) {
            return
        }
        // 页面上删除这一项内容
        let btnDel = e.srcElement
        let conDiv = btnDel.parentNode
        conDiv.parentNode.removeChild(conDiv)
        // 获取删除这项的id调用db的删除方法
        let id = e.getAttribute('plid')
        db.removeData(id)
    }
    // 创建DataHelper类的对象，并设置好 数据键 和 评论唯一标识键 id
    let db = new DataHelper('dataKey','id')
    // 页面加载时，展示本地数据列表
    window.onload = function () {
        let arr = db.readData()
        for (let ele of arr) {
            // 根据数据生成div列表
            makeDiv(ele.content,ele.id)
        }
    }
    // 新增的功能，将数据存储到本地，加载到页面上
    document.querySelector('btnAddObj').onclick = function () {
       let strContent = document.querySelector('txtValue').value
        let id = db.addData('rtyuioghjkbnm')
        makeDiv(id,strContent)
        // 清空文本框内容

    }
</script>
</html>